<template>
  <div class="app-container">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="120px">
      <el-row :gutter="20">
        <!-- 公司及联系人信息 -->
        <el-divider content-position="left">
          <legend class="divider-line">商家及联系人信息</legend>
        </el-divider>
        <el-col :span="8">
          <el-form-item label="商家名称" prop="company">
            <el-input v-model="ruleForm.company"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="公司所在地" prop="companyCity">
            <el-select
              v-model="region1"
              @change="changeSelete1"
              placeholder="请选择">
              <el-option
                v-for="item in regionlist1"
                :key="item.id"
                :label="item.regionName"
                :value="item.id"></el-option>
            </el-select>
            <el-select
              v-model="region2"
              @change="changeSelete2"
              placeholder="请选择">
              <el-option
                v-for="item in regionlist2"
                :key="item.id"
                :label="item.regionName"
                :value="item.id"></el-option>
            </el-select>
            <span class="form-word-hint">请选择公司注册地</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="注册地址" prop="companyAdd">
            <el-input v-model="ruleForm.companyAdd"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="公司电话" prop="telephone">
            <el-input v-model="ruleForm.telephone"></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="传真">
            <el-input v-model="ruleForm.fax"></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
        </el-col>

        <!-- 营业执照信息 -->
        <el-divider content-position="left">
          <legend class="divider-line">营业执照信息</legend>
        </el-divider>
        <el-col :span="8">
          <el-form-item label="营业执照编号" prop="bussinessLicense">
            <el-input v-model="ruleForm.bussinessLicense"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="统一社会信用代码" prop="taxLicense">
            <el-input v-model="ruleForm.taxLicense"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="日期范围" prop="date">
            <el-date-picker
              v-model="ruleForm.date"
              type="datetimerange"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd"
              range-separator="-"
              start-placeholder="注册时间"
              end-placeholder="营业时间"
              :default-time="['00:00:00']"></el-date-picker>
            <span class="form-word-hint">请选择营业执照注册时间到营业时间</span>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="营业执照" prop="bussinessLicenseImage">
            <el-upload
              class="avatar-uploader"
              :action="$imageUrl + '/uploadFileImage'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img
                v-if="ruleForm.bussinessLicenseImage"
                :src="$imagePath + ruleForm.bussinessLicenseImage"
                class="avatar block" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span class="form-word-hint">
              图片不能超过1024KB，只能上传png、jpg图片
            </span>
          </el-form-item>
        </el-col>

         <el-divider content-position="left">
          <legend class="divider-line">其它证照信息</legend>
        </el-divider>
         <el-col :span="10">
          <el-form-item label="经营许可证" prop="bussinessLicenseImg">
            <el-upload
              class="avatar-uploader"
              :action="$imageUrl + '/uploadFileImage'"
              :show-file-list="false"
              :on-success="handleBussinessLicenseImgSuccess"
              :before-upload="beforeAvatarUpload">
              <img
                v-if="ruleForm.bussinessLicenseImg"
                :src="$imagePath + ruleForm.bussinessLicenseImg"
                class="avatar block" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span class="form-word-hint">
              图片不能超过1024KB，只能上传png、jpg图片
            </span>
          </el-form-item>
        </el-col>
         <el-col :span="10">
          <el-form-item label="其它证照" prop="otherImg">
            <el-upload
              class="avatar-uploader"
              :action="$imageUrl + '/uploadFileImage'"
              :show-file-list="false"
              :on-success="handleOtherImgSuccess"
              :before-upload="beforeAvatarUpload">
              <img
                v-if="ruleForm.otherImg"
                :src="$imagePath + ruleForm.otherImg"
                class="avatar block" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span class="form-word-hint">
              图片不能超过1024KB，只能上传png、jpg图片
            </span>
          </el-form-item>
        </el-col>

        <!-- 法人信息 -->
        <el-divider content-position="left">
          <legend class="divider-line">法人信息</legend>
        </el-divider>
        <el-col :span="8">
          <el-form-item label="法人" prop="legalPerson">
            <el-input v-model="ruleForm.legalPerson"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人电话" prop="personPhone">
            <el-input v-model="ruleForm.personPhone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人身份证" prop="legalPersonCard">
            <el-input v-model="ruleForm.legalPersonCard"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证开始日期" prop="cardStart">
            <el-date-picker
              v-model="ruleForm.cardStart"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择身份证开始日期"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证结束日期" prop="cardEnd">
            <el-date-picker
              v-model="ruleForm.cardEnd"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择身份证结束日期"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证地址" prop="cardAddress">
            <el-input v-model="ruleForm.cardAddress"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="身份证正面" prop="personCardUp">
            <el-upload
              class="avatar-uploader"
              :action="$imageUrl + '/uploadFileImage'"
              :show-file-list="false"
              :on-success="handleCardUpSuccess"
              :before-upload="beforeAvatarUpload">
              <img
                v-if="ruleForm.personCardUp"
                :src="$imagePath + ruleForm.personCardUp"
                class="avatar block" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span class="form-word-hint">
              上传身份证正面图片，图片不能超过1024KB，只能上传png、jpg图片
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="身份证反面" prop="personCardDown">
            <el-upload
              class="avatar-uploader"
              :action="$imageUrl + '/uploadFileImage'"
              :show-file-list="false"
              :on-success="handleCardDownSuccess"
              :before-upload="beforeAvatarUpload">
              <img
                v-if="ruleForm.personCardDown"
                :src="$imagePath + ruleForm.personCardDown"
                class="avatar block" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span class="form-word-hint">
              上传身份证反面图片，图片不能超过1024KB，只能上传png、jpg图片
            </span>
          </el-form-item>
        </el-col>

        <!-- 银行开户信息(此账号为结算账号) -->
        <el-divider content-position="left">
          <legend class="divider-line">银行开户信息(此账号为结算账号)</legend>
        </el-divider>
        <el-col :span="8">
          <el-form-item label="账户名称" prop="bankUser">
            <el-input v-model="ruleForm.bankUser"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开户行" prop="bankName">
            <el-input v-model="ruleForm.bankName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支行名称" prop="bankNameBranch">
            <el-input v-model="ruleForm.bankNameBranch"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支行联行号" prop="brandNameCode">
            <el-input v-model="ruleForm.brandNameCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开户行省市编码" prop="bankAddressCode">
            <el-input v-model="ruleForm.bankAddressCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="银行账号" prop="bankCode">
            <el-input v-model="ruleForm.bankCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="开户所在地" prop="bankCity">
            <el-select
              v-model="account1"
              @change="changeAccount1"
              placeholder="请选择">
              <el-option
                v-for="item in accountlist1"
                :key="item.id"
                :label="item.regionName"
                :value="item.id"></el-option>
            </el-select>
            <el-select
              v-model="account2"
              @change="changeAccount2"
              placeholder="请选择">
              <el-option
                v-for="item in accountlist2"
                :key="item.id"
                :label="item.regionName"
                :value="item.id"></el-option>
            </el-select>
            <span class="form-word-hint">请选择银行的开户地址</span>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="支付宝账号" prop="aliAccount">
            <el-input v-model="ruleForm.aliAccount"></el-input>
          </el-form-item>
        </el-col> -->

        <!-- 店铺信息 -->
        <el-divider content-position="left">
          <legend class="divider-line">店铺信息</legend>
        </el-divider>
        <el-col :span="8">
          <el-form-item label="商家账号" prop="userName">
            <el-input v-model="ruleForm.userName" maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="店铺账号" prop="sellerName">
            <el-input v-model="ruleForm.sellerName" maxlength="20"></el-input>
          </el-form-item>
        </el-col> -->

        <div class="fixed-bottom-20">
          <el-button type="primary" @click="submitForm('ruleForm')">
            立即提交
          </el-button>
          <el-button type="success" @click="back">返回</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </div>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { uploadFileImage, uploadCardImage } from "@/api/all";
import { getRegionListSeller, createApplySeller } from "@/api/seller";
import { Message } from "element-ui";
export default {
  name: "addsellerApply",
  data() {
    // 验证手机号码
    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的邮箱格式"));
        }
      }, 100);
    };
    // 验证身份证信息
    var checkIdNum = (rule, value, callback) => {
      const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (!value) {
        return callback(new Error("请输入法人身份证号码"));
      } else if (!reg.test(value)) {
        return callback(new Error("证件号码不正确"));
      } else {
        callback();
      }
    };
    return {
      // 选择公司所在地
      regionlist1: [], // 第一级分类
      region1: "", // 默认选中一级分类
      regionlist2: [], // 第二级分类
      region2: "", // 默认选中二级分类
      // 选择开户行所在地
      accountlist1: [], // 第一级分类
      account1: "", // 默认选中一级分类
      accountlist2: [], // 第二级分类
      account2: "", // 默认选中二级分类
      ruleForm: {
        taxLicense: "",
        company: "",
        companyProvince: "",
        companyCity: "",
        companyAdd: "",
        telephone: "",
        fax: "",
        email: "",
        date: [],

        yxkjdate: [],
        bussinessLicense: "",
        organization: "",
        bussinessLicenseImage: "",
        bussinessLicenseImg: "",
        otherImg: "",
        legalPerson: "",
        personPhone: "",
        legalPersonCard: "",
        personCardUp: "",
        personCardDown: "",
        bankUser: "",
        bankName: "",
        bankNameBranch: "",
        brandNameCode: "",
        bankCode: "",
        bankProvince: "",
        bankCity: "",
        userName: "",
        sellerName: "",
        cardUpMediaId: "",
        cardDownMediaId: "",
        bussinessLicenseImageMediaId: "",
        cardStart: "",
        cardEnd: "",
        cardAddress: "",
        aliAccount: "",
        bankAddressCode: "",
      },
      rules: {
        company: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
          {
            max: 50,
            message: "公司名称长度为不能超过50个字符",
            trigger: "blur",
          },
        ],
        companyCity: [
          { required: true, message: "请选择公司所在地", trigger: "change" },
        ],
        bankCity: [
          { required: true, message: "请选择开户所在地", trigger: "change" },
        ],
        companyAdd: [
          { required: true, message: "请输入注册地址", trigger: "blur" },
          {
            max: 200,
            message: "注册地址长度为不能超过200个字符",
            trigger: "blur",
          },
        ],
        telephone: [
          { required: true, message: "请输入公司电话", trigger: "blur" },
          {
            max: 20,
            message: "公司电话长度为不能超过20个字符",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入公司邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: "blur" },
        ],
        bussinessLicense: [
          { required: true, message: "请输入公司营业执照号", trigger: "blur" },
          {
            max: 50,
            message: "公司营业执照号长度为不能超过50个字符",
            trigger: "blur",
          },
        ],

        organization: [
          {
            required: true,
            message: "请输入公司组织机构代码号",
            trigger: "blur",
          },
          {
            max: 50,
            message: "公司组织机构代码号长度为不能超过50个字符",
            trigger: "blur",
          },
        ],
        date: [
          {
            required: true,
            message: "请选择营业执照注册时间到营业时间",
            trigger: "change",
          },
        ],

        bussinessLicenseImage: [
          { required: true, message: "请上传营业执照", trigger: "change" },
        ],
        legalPerson: [
          { required: true, message: "请输入法人姓名", trigger: "blur" },
          {
            max: 20,
            message: "法人姓名长度为不能超过20个字符",
            trigger: "blur",
          },
        ],
        personPhone: [
          { required: true, message: "请输入法人联系方式", trigger: "blur" },
          {
            max: 20,
            message: "法人联系方式长度为不能超过20个字符",
            trigger: "blur",
          },
        ],
        legalPersonCard: [
          { required: true, validator: checkIdNum, trigger: "blur" },
        ],
        personCardUp: [
          {
            required: true,
            message: "请上传身份证正面照片",
            trigger: "change",
          },
        ],
        personCardDown: [
          {
            required: true,
            message: "请上传身份证反面照片",
            trigger: "change",
          },
        ],
        bankUser: [
          { required: true, message: "请输入开户行账户", trigger: "blur" },
          {
            max: 50,
            message: "开户行账户长度为不能超过50个字符",
            trigger: "blur",
          },
        ],
        bankName: [
          { required: true, message: "请输入开户行", trigger: "blur" },
          { max: 50, message: "开户行长度为不能超过50个字符", trigger: "blur" },
        ],
        bankNameBranch: [
          { required: true, message: "请输入开户行支行信息", trigger: "blur" },
          {
            max: 50,
            message: "开户行支行信息长度为不能超过50个字符",
            trigger: "blur",
          },
        ],
        brandNameCode: [
          { required: true, message: "请输入开户行支行行号", trigger: "blur" },
          {
            max: 50,
            message: "开户行支行行号长度为不能超过50个字符",
            trigger: "blur",
          },
        ],
        bankCode: [
          { required: true, message: "请输入银行账号", trigger: "blur" },
          {
            max: 50,
            message: "银行账号长度为不能超过50个字符",
            trigger: "blur",
          },
        ],
        userName: [
          { required: true, message: "请输入商家账号", trigger: "blur" },
          {
            max: 20,
            message: "商家账号长度为不能超过20个字符",
            trigger: "blur",
          },
        ],
        sellerName: [
          { required: true, message: "请输入店铺名称", trigger: "blur" },
          {
            max: 20,
            message: "店铺名称长度为不能超过20个字符",
            trigger: "blur",
          },
        ],
        bankAddressCode: [
          { required: true, message: "请输入开户行省市编码", trigger: "blur" },
          {
            max: 50,
            message: "开户行省市编码长度为不能超过50个字符",
            trigger: "blur",
          },
        ],
        cardStart: [
          {
            required: true,
            message: "请选择身份证开始时间",
            trigger: "change",
          },
        ],
        cardEnd: [
          {
            required: true,
            message: "请选择身份证结束时间",
            trigger: "change",
          },
        ],
        cardAddress: [
          { required: true, message: "请输入身份证地址", trigger: "blur" },
          {
            max: 50,
            message: "身份证地址长度为不能超过50个字符",
            trigger: "blur",
          },
        ],
        aliAccount: [
          { required: true, message: "请输入支付宝账号", trigger: "blur" },
          {
            max: 50,
            message: "支付宝账号长度为不能超过50个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    getRegionListSeller({ parentId: "" }).then((res) => {
      this.regionlist1 = res.data.data;
      this.accountlist1 = res.data.data;
    });
  },
  methods: {
    // 选择公司所在地
    changeSelete1(second) {
      // 首次点击初始化
      this.regionlist2 = [];
      this.region2 = "";
      this.ruleForm.companyProvince = second;
      // 获取第二级分类列表
      getRegionListSeller({ parentId: second }).then((res) => {
        this.regionlist2 = res.data.data;
      });
    },
    changeSelete2(third) {
      this.ruleForm.companyCity = third;
    },
    // 选择开户行所在地
    changeAccount1(second) {
      // 首次点击初始化
      this.accountlist2 = [];
      this.account2 = "";
      this.ruleForm.bankProvince = second;
      // 获取第二级分类列表
      getRegionListSeller({ parentId: second }).then((res) => {
        this.accountlist2 = res.data.data;
      });
    },
    changeAccount2(third) {
      this.ruleForm.bankCity = third;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 1;

      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG和PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 1MB!");
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess(res, file) {
      // 上传营业执照
      const formData = new FormData();
      formData.append("type", "brand");
      formData.append("imageFile", file.raw);
      uploadCardImage(formData).then((result) => {
        if (result.data.success) {
          this.ruleForm.bussinessLicenseImage = result.data.data.img;
          this.ruleForm.bussinessLicenseImageMediaId = result.data.data.mediaId;
        }
      });
    },
    handleBussinessLicenseImgSuccess(res, file) {
      // 上传经营许可证
      const formData = new FormData();
      formData.append("type", "brand");
      formData.append("imageFile", file.raw);
      uploadCardImage(formData).then((result) => {
        if (result.data.success) {
          console.log(result);
          this.ruleForm.bussinessLicenseImg = result.data.data.img;
          this.ruleForm.bussinessLicenseImgId = result.data.data.mediaId;
        }
      });
    },
    handleOtherImgSuccess(res, file) {
      // 上传其他证照
      const formData = new FormData();
      formData.append("type", "brand");
      formData.append("imageFile", file.raw);
      uploadCardImage(formData).then((result) => {
        if (result.data.success) {
          this.ruleForm.otherImg = result.data.data.img;
          this.ruleForm.otherImgId = result.data.data.mediaId;
        }
      });
    },
    handleCardUpSuccess(res, file) {
      // 上传身份证正面照片
      const formData = new FormData();
      formData.append("type", "brand");
      formData.append("imageFile", file.raw);
      uploadCardImage(formData).then((result) => {
        if (result.data.success) {
          this.ruleForm.personCardUp = result.data.data.img;
          this.ruleForm.cardUpMediaId = result.data.data.mediaId;
        }
      });
    },
    handleCardDownSuccess(res, file) {
      // 上传身份证反面照片
      const formData = new FormData();
      formData.append("type", "brand");
      formData.append("imageFile", file.raw);
      uploadCardImage(formData).then((result) => {
        if (result.data.success) {
          this.ruleForm.personCardDown = result.data.data.img;
          this.ruleForm.cardDownMediaId = result.data.data.mediaId;
        }
      });
    },
    submitForm(formName) {
      // 提交信息
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.yxkjdate = `${this.ruleForm.date[0]} - ${this.ruleForm.date[1]}`;
          console.log(this.ruleForm);
          createApplySeller(this.ruleForm).then((res) => {
            if (!res.data.success) {
              Message.error(res.data.message);
              return;
            }
            Message.success("操作成功");
            history.back();
          });
        }
      });
    },
    resetForm(formName) {
      // 重置表单
      this.$refs[formName].resetFields();
    },
    back() {
      history.back();
    },
  },
};
</script>
<style scoped>
::v-deep [class*="el-row"] {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 60px;
}
.el-select {
  margin-right: 10px;
}

::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
::v-deep [class*="el-col-"] {
  float: none;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  height: 150px;
  display: block;
}
</style>
